/**
 * 管理员用户详细信息页面
 * @author 韩睿倩
 */
<template>
  <div>
    <!-- <h3>详细信息</h3> -->
    <el-page-header @back="goBack" content="用户详情页面">
    </el-page-header>
    <el-card>
      <el-descriptions title="详细信息" :column="1">
        <el-descriptions-item label="昵称">{{
            userInfoTable.userName
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{
            userInfoTable.sex
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
            userInfoTable.phoneNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="密码">{{
            userInfoTable.password
        }}</el-descriptions-item>
        <el-descriptions-item label="生日">{{
            userInfoTable.birthday
        }}</el-descriptions-item>
        <el-descriptions-item label="学历">{{
            userInfoTable.education
        }}</el-descriptions-item>
        <el-descriptions-item label="学校">{{
            userInfoTable.school
        }}</el-descriptions-item>
        <el-descriptions-item label="职业">{{
            userInfoTable.career
        }}</el-descriptions-item>
      </el-descriptions>

      <el-button type="primary" round @click="update">编辑信息</el-button>
      <el-button type="danger" round @click="del">删除用户</el-button>


      <!-- 编辑信息弹框 -->
      <el-dialog title="信息修改" :visible.sync="dialogVisible" @close="changeClose">
        <span>详细信息</span>

        <el-form ref="userInfoTable" label-width="100px" class="demo-ruleForm" :rules="rules" :model="userInfoTable">
          <el-form-item label="昵称" prop="userName">
            <el-input v-model="userInfoTable.userName"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="userInfoTable.sex" placeholder="请选择性别">
              <el-option label="男" value="m"></el-option>
              <el-option label="女" value="f"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="密码" prop="password">
            <el-input v-model="userInfoTable.password"></el-input>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
            <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="userInfoTable.birthday">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="学历" prop="education">
            <el-select v-model="userInfoTable.education" placeholder="请选择学历">
              <el-option label="博士" value="博士"></el-option>
              <el-option label="硕士" value="硕士"></el-option>
              <el-option label="本科" value="本科"></el-option>
              <el-option label="大专" value="大专"></el-option>
              <el-option label="高中" value="高中"></el-option>
              <el-option label="初中" value="初中"></el-option>
              <el-option label="小学" value="小学"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学校" prop="school">
            <el-input v-model="userInfoTable.school"></el-input>
          </el-form-item>
          <el-form-item label="职业" prop="career">
            <el-input v-model="userInfoTable.career"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="updateUserInfo">确定</el-button>
        </span>
      </el-dialog>
    </el-card>

    <!-- 删除弹框 -->
    <el-dialog title="删除用户" :visible.sync="deleteDialogVisible" @close="deleteClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="密码" prop="adminPassword">
          <el-input type="password" v-model="ruleForm.adminPassword" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="delSuccess('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDelete">取消</el-button>
        <el-button type="primary" @click="delSuccess">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserInfoAdmin,
  updateUserInfo,
  deleteUser
} from "../../api/administrator/userInfoApi";

export default {
  inject: ["reload"],
  name: "userInfoPage",
  compoments: {},
  data() {
    return {
      checkInfo: {
        phoneNumber: null,
        userId: this.$store.getters.userIdAdmin,
      },
      userInfoTable: {
        userName: "",
        sex: "",
        password: "",
        birthday: "",
        education: "",
        school: "",
        career: "",
      },
      ruleForm: {
        adminPassword: ''
      },
      deleteDialogVisible: false,
      dialogVisible: false,
      rules: {
        userName: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }, //格式要求待定
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],

        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }, //格式要求待定
        ],
        adminPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }, //格式要求待定
        ],
        birthday: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],

      },
    };
  },
  computed: {
    //传递的userId
    userId() {
      return this.$store.getters.userIdAdmin;
    },

    //管理员的adminId
    adminId() {
      return this.$store.getters.userId;
    },

  },
  methods: {
    //编辑信息
    update() {

      this.dialogVisible = true;
    },

    del() {
      this.deleteDialogVisible = true;

    },

    //删除用户
    delSuccess() {
      // ruleForm = this.ruleForm
      console.log(this.userId)
      console.log(Number(this.adminId))
      console.log(this.ruleForm.adminPassword)
      deleteUser(this.userId, { adminId: Number(this.adminId), adminPassword: this.ruleForm.adminPassword }).then((res) => {
        if (res.resultCode != 200) {
          this.$message.error('密码错误');
          this.reload()
        }
        else if (res.resultCode == 200) {
          console.log("删除成功")
          this.$message.success('删除用户成功')
          this.deleteDialogVisible = false;
          this.$router.push('/administratorHome/userManagement')
        }
        console.log(res)
      }).catch((err) => {
        console.log("失败")
        console.log(err)
      })
    },
    goBack() {
      console.log('go back');
      this.$router.push('/administratorHome/userManagement')
    },
    //取消删除
    cancelDelete() {
      this.deleteDialogVisible = false;

    },

    //取消编辑
    cancelEdit() {
      this.dialogVisible = false;

    },
    //确定修改用户信息
    updateUserInfo() {
      console.log("updateUserInfo success")
      console.log(this.userId)
      this.$refs.userInfoTable.validate(valid => {
        if (valid) {
          // this.loading = true;
          // this.userInfoTable['userId'] = this.userId;
          console.log(this.userId, this.userInfoTable)
          updateUserInfo(this.userId, this.userInfoTable).then(res => {
            console.log(res);

            if (res.resultCode != 200) {
              return this.$message.error('修改用户信息失败')
            }

            //关闭对话框
            this.dialogVisible = false;
            //刷新页面，重新获取数据    
            this.reload();
            // 确认修改成功
            this.$message.success('修改用户信息成功')


          }).catch(() => { }).then(() => { this.loading = false; })
        }
      })




    },

    //监听表单重置
    changeClose() {
      this.$refs.userInfoTable.resetFields()
    },
    deleteClose() {
      this.$refs.ruleForm.resetFields()
    }
  },

  //刷新页面，重新获取数据
  created() {
    console.log("okk11111kkk")
    // console.log(this.userId)
    // console.log(this.checkInfo)
    getUserInfoAdmin({ phoneNumber: this.checkInfo.phoneNumber, userId: this.checkInfo.userId })
      .then((res) => {
        console.log(res)
        console.log(res.data);
        this.userInfoTable = res.data;
      })
      .catch((err) => {
        console.log("失败")
        console.log(err);
      });
    console.log("okkkkk")

  },
};
</script>

<style lang="scss" scoped>
.el-card {
  width: 600px;
  margin: auto;
  margin-top: 20px;

}

.el-descriptions {
  font-size: 20px;

}

.div {
  align-items: center;
  justify-content: center;
}

.el-dialog {
  font-size: 20px;
}
</style>

<style lang="scss">
.el-descriptions__title {
  font-size: 25px;
  font-weight: 700;
}

.el-card__body {
  padding: 40px;
}

.el-page-header {
  display: flex;
  line-height: 50px;
  font-size: 50px;
}

.el-page-header__content {
  font-size: 20px;
  color: #303133;
}

.el-page-header__title {
  font-size: 20px;
  font-weight: 500;
}
</style>